<script>
/*
 * @Author: Your name
 * @Date:   2020-07-04 09:33:35
 * @Last Modified by:   Your name
 * @Last Modified time: 2020-07-22 08:54:53
 */
</script>
<template>
    <div>
        <nav-bar id="navbar">
            <div slot="left" class="backIcon" @click="backClick">
                <img src="../../../assets/img/common/back.svg" alt="">
            </div>
            <div slot="center" class="title">
                <div class="titleItem" :class="{titleActive:currentIndex === index}" v-for="(item,index) in titles" :key="item" @click="titleClick(index)">{{ item }}</div> 
            </div>
            <div slot="right">
                
            </div>
        </nav-bar>
    </div>
</template>
<script>
import navBar from '../../../components/common/navbar/NavBar.vue';
export default {
    components:{
        navBar
    },
    data(){
        return {
            titles:['商品','参数','评论','推荐'],
            currentIndex:0
        }
    },
    methods:{
        backClick(){
            this.$router.back();
        },
        titleClick(index){
            this.currentIndex = index;
            this.$emit('typeClick', index);
        }
    }
}
</script>
<style lang="css">
    #navbar{
        background-color: #ffffff;
        position: relative;
        z-index: 9;
    }
    #navbar .title{
        color: #666;
        display: flex;
        font-size: 14px;
    }
    #navbar .title .titleItem{
        flex: 1;
    }
    #navbar .backIcon{
        padding-top: 7px;
        box-sizing: border-box;
    }
    .titleActive{
        color: var(--color-high-text);
    }
</style>